[#macro applicationMenuView]
<div class="model-form1">
    <el-tabs v-model="activeName">
        <el-tab-pane label="表格树" name="third">

            <el-button type="primary" size="mini" @click="append()" style="margin-bottom:15px;">增加一级菜单
            </el-button>
            <el-button type="primary" size="mini" @click="syncMenu()" style="margin-bottom:15px;">同步菜单
            </el-button>
            <el-table :data="treeOptions.children" style="width: 100%;margin-bottom: 20px;" row-key="id"
                border>
                <el-table-column prop="name" label="菜单名称" sortable width="200" align="left">
                </el-table-column>
                <el-table-column prop="icon" label="图标" width="50" align="center">
                    <template slot-scope="scope">
                        <i :class="scope.row.icon"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="sortNum" label="排序号" width="80" align="center">
                </el-table-column>

                <el-table-column prop="catalog" label="功能类型"  width="80"  align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.catalog==0">菜单</span>
                        <span v-else>按钮</span>
                    </template>
                </el-table-column>
                <el-table-column prop="catalog" label="菜单类型"  width="80"  align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.menuType==1">租户</span>
                        <span v-else>通用</span>
                    </template>
                </el-table-column>
                <el-table-column prop="permission" label="权限"  width="180" >
                </el-table-column>
                <el-table-column prop="ids" label="菜单号"  width="80" >
                </el-table-column>

                <el-table-column prop="path" label="url">
                </el-table-column>
                <el-table-column label="操作" width="240" align="center"   >
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="append(scope.row)">增加
                        </el-button>
                        <el-button type="primary" size="mini" @click="editData(scope.row)">编辑
                        </el-button>
                        <el-button type="danger" size="mini" style="cursor: pointer;"
                            @click="deleteData(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="功能树" name="second">
            <vue2-org-tree class="tree-div" :data="treeOptions"
                :collapsable="collapsable" :expandAll="expandAll" :horizontal="horizontal"
                :label-class-name="labelClassName" :render-content="renderContent" @on-expand="onExpand"
                @on-node-click="onNodeClick" />
        </el-tab-pane>
    </el-tabs>

    <el-dialog title="增加分类" :visible.sync="showDialog" width="50%">
        <el-row :gutter="20">
            <el-col :span="18" :offset="2">
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">上级菜单：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-input disabled="true" size="small" v-model="form.parentName"></el-input>
                    </el-col>
                </el-row>
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">菜单名称：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-input size="small" v-model="form.name"></el-input>
                    </el-col>
                </el-row>
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">图标：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-input size="small" v-model="form.icon"></el-input>
                    </el-col>
                </el-row>
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">url：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-input size="small" v-model="form.path"></el-input>
                    </el-col>
                </el-row>
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">路由：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-input size="small" v-model="form.router"></el-input>
                    </el-col>
                </el-row>
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">权限名称：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-input size="small" v-model="form.permission"></el-input>
                    </el-col>
                </el-row>
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">排序号：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-input-number size="small" v-model="form.sortNum"></el-input-number>
                    </el-col>
                </el-row>
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">功能类型：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-radio-group size="small"  v-model="form.catalog">
                            <el-radio-button label="0">菜单</el-radio-button>
                            <el-radio-button label="1">按钮</el-radio-button>
                            <el-radio-button label="2">单页面</el-radio-button>
                            <el-radio-button label="3">外部链接</el-radio-button>
                            <el-radio-button label="4">iframe</el-radio-button>
                        </el-radio-group>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="showDialog = false">取 消</el-button>
            <el-button size="small" type="primary" @click="addTreeItem">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog title="编辑菜单" :visible.sync="editDialog" width="50%">
        <el-row :gutter="20">
            <el-col :span="18" :offset="2">
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">菜单名称：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-input size="small" v-model="form.name"></el-input>
                    </el-col>
                </el-row>
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">图标：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-input size="small" v-model="form.icon"></el-input>
                    </el-col>
                </el-row>
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">url：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-input size="small" v-model="form.path"></el-input>
                    </el-col>
                </el-row>
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">路由：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-input size="small" v-model="form.router"></el-input>
                    </el-col>
                </el-row>
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">权限名称：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-input size="small" v-model="form.permission"></el-input>
                    </el-col>
                </el-row>
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">排序号：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-input-number size="small" v-model="form.sortNum"></el-input-number>
                    </el-col>
                </el-row>
                <el-row class="input-line">
                    <el-col :span="6">
                        <span class="el-form-item__label title">功能类型：</span>
                    </el-col>
                    <el-col :span="18">
                        <el-radio-group size="small"  v-model="form.catalog">
                            <el-radio-button label="0">菜单</el-radio-button>
                            <el-radio-button label="1">按钮</el-radio-button>
                            <el-radio-button label="2">单页面</el-radio-button>
                            <el-radio-button label="3">外部链接</el-radio-button>
                            <el-radio-button label="4">iframe</el-radio-button>
                        </el-radio-group>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="editDialog = false">取 消</el-button>
            <el-button size="small" type="primary" @click="editTreeItem">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>确认要删除该条数据吗?</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleClose">确 定</el-button>
        </span>
    </el-dialog>

</div>
[/#macro]

[#macro applicationMenuConfig]
<script type="text/x-template" id="my-applicationmenu-update">
    [@applicationMenuView /]
</script>
<script type="text/javascript">

    function clone(Obj) {
        var buf;
        if (Obj instanceof Array) {
            buf = [];
            var i = Obj.length;
            while (i--) {
                buf[i] = clone(Obj[i]);
            }
            return buf;
        }
        else if (Obj instanceof Object) {
            buf = {};
            for (var k in Obj) {
                buf[k] = clone(Obj[k]);
            }
            return buf;
        } else {
            return Obj;
        }
    }
    function restObject(Obj) {
        var buf;
        if (Obj instanceof Array) {
            buf = [];
            var i = Obj.length;
            while (i--) {
                buf[i] = clone(Obj[i]);
            }
            return buf;
        }
        else if (Obj instanceof Object) {
            buf = {};
            for (var k in Obj) {
                buf[k] = restObject(Obj[k]);
            }
            return buf;
        } else {
            return "";
        }
    }

    //更新组件开始
    var applicationMenuConfig = {};
    applicationMenuConfig.template = "#my-applicationmenu-update";
    applicationMenuConfig.methods = config.basicMethod();


    
    applicationMenuConfig.methods.syncMenu = function () {
        var data={};
        data.id=this.searchObject.app;
        var  self=this;
        this.postData("${siteurl}tenantRest/application/syncMenu.htm", data, function (res) {
            if (res.code == 0) {
                self.$message({
                    message: '同步菜单成功',
                    type: 'success'
                });
                //window.history.go(-1)
                self.editDialog = false;
                self.getSearchList();
            } else {
                self.$message.error(res.msg);
            }
        });
    }
    applicationMenuConfig.methods.getSearchList = function () {
        this.loading = true;
        var data = this.searchObject, that = this;
        data.fetch = 1;
        data.size = 500;
        data.sortMethod = "asc";
        data.sortField = "sortNum";
        $.post("${siteurl}tenantRest/applicationmenu/list.htm", data, function (result) {
            if (result.code == 0) {
                that.treeOptions.children = result.list;
                //that.treeOptions = result.list;
            }
            setTimeout(function () {
                that.loading = false;
            }, 300)
        });
    }
    applicationMenuConfig.data = function () {
        return {
            searchObject: {
                no: 1,
                size: 10,
                name: '',
                fetch: 1,
                level: 1
            },
            dialogVisible: false,
            editDialog: false,
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            loading: false,
            tableData: {},
            treeOptions: {
                id: -1,
                name: '菜单结构',
                children: []
            },
            props: { label: 'name', children: 'children', expand: 'expand' },
            horizontal: true,
            collapsable: false,
            expandAll: false,
            labelClassName: 'bg-white',
            contextMenuVisible: false,
            contextMenuTarget: document.body,
            showDialog: false,
            form: {
                name: "",
                parent: "",
                sortNum: "",
            }
            , activeName: "third"
        }
    };
    applicationMenuConfig.mounted = function () {
        var id = this.$route.query.id;
        var self = this;
        this.searchObject.app=id;
        this.form.app=id;

        this.getSearchList();
    }

    applicationMenuConfig.methods.renderContent = function (h, data) {
        return data.name;
    };


    applicationMenuConfig.methods.onExpand = function (e, data) {
        if ('expand' in data) {
            data.expand = !data.expand
            if (!data.expand && data.children) {
                this.collapse(data.children)
            }
        } else {
            this.$set(data, 'expand', true)
        }
    };
    applicationMenuConfig.methods.onNodeClick = function (e, data) {
        $(".bg-white").removeClass('bg-white-curren');
        $(e.target).addClass('bg-white-curren');
        this.parentId = data.id;
        this.departmentName = data.name;
    };
    applicationMenuConfig.methods.collapse = function (list) {
        var _this = this
        list.forEach(function (child) {
            if (child.expand) {
                child.expand = false
            }
            child.children && _this.collapse(child.children)
        })
    };
    applicationMenuConfig.methods.expandChange = function () {
        this.toggleExpand(this.departments, true)
    };

    applicationMenuConfig.methods.showClick = function (event) {
        this.contextMenuVisible = false;
        console.log('deleteDatabaseOrTable', event);
    };

    applicationMenuConfig.methods.handleNodeClick = function (data) {
    }
    applicationMenuConfig.methods.append = function (data) {
        this.showDialog = true;
        this.form = restObject(this.form);
        this.form.app=this.searchObject.app;
        this.form.parent = data.id;
        this.form.parentName = data.name;
        this.selectData = data;
    }

    applicationMenuConfig.methods.remove = function (node, data) {
        console.log(event)
        this.selectId = data.id;
        this.dialogVisible = true;
        var parent = node.parent;
        this.selectData = parent.data.children || parent.data;
    }
    applicationMenuConfig.methods.deleteData = function (data) {
        console.log(event)
        this.selectId = data.id;
        this.dialogVisible = true;
    }
    applicationMenuConfig.methods.editData = function (data) {
        console.log(event)
        this.form = clone(data);
        this.form.children = "";
        this.editDialog = true;
    }
    applicationMenuConfig.methods.editTreeItem = function (data) {
        var self = this, data = this.form;
        //delete data.linkCatalog;
        if (this.deforeUpdateData) {
            this.deforeUpdateData();
        }
        this.postData("${siteurl}tenantRest/applicationmenu/update.htm", data, function (res) {
            if (res.code == 0) {
                self.$message({
                    message: '修改数据成功',
                    type: 'success'
                });
                //window.history.go(-1)
                self.editDialog = false;
                self.getSearchList();
            } else {
                self.$message.error(res.msg);
            }
        });
    }

    applicationMenuConfig.methods.addTreeItem = function (data) {
        this.addData();
    }
    applicationMenuConfig.methods.addData = function () {
        var self = this, data = this.form;
        if (this.deforeAddData) {
            this.deforeAddData();
        }
        if (this.parentId) {
            data.parent = this.parentId;
        }
        this.postData("${siteurl}tenantRest/applicationmenu/create.htm", data, function (res) {
            self.showDialog = false;
            if (res.code == 0) {
                self.$message({
                    message: '添加数据成功',
                    type: 'success'
                });
                self.getSearchList();
            } else {
                self.$message.error(res.msg);
            }
        });
    }
    applicationMenuConfig.methods.handleClose = function (done) {
        this.dialogVisible = false;
        var self = this;
        if (self.selectId) {
            var params = {};
            params.id = self.selectId;
            this.postData("${siteurl}tenantRest/applicationmenu/delete.htm", params, function (res) {

                if (res.code == 0) {
                    self.$message({
                        message: '删除数据成功',
                        type: 'success'
                    });
                    self.getSearchList();
                    return;
                    if (self.selectData) {
                        const index = self.selectData.findIndex(d => d.id === self.selectId);
                        self.selectData.splice(index, 1);
                    } else {

                    }
                } else {
                    self.$message.error(res.msg);
                }
            });
        }

    }
    var applicationMenuView = Vue.component('update-view', applicationMenuConfig);
    //更新组件结束
</script>
[/#macro]